<template>
	<view
		:style="{
			'--bgcolor': pageData.bgColor,
			'--price-color': pageData.priceColor || '#E90B08',
			'--color': color,
		}"
		v-if="infoData.length">
		<!-- 一行两个 -->
		<view
			class="content d-flex f-wrap j-sb"
			v-if="pageData.listStyle == 2"
			:style="{
				'--height-2': pageData.picScale ? 332 * pageData.picScale + 'rpx' : '332rpx',
			}">
			<view
				class="list m-bot20"
				:class="{ shadow: pageData.shadow == 1 }"
				v-for="(item, index) in infoData"
				:key="index"
				@click="toGoods(item.goods_id)">
				<image
					:src="$imgUrls(item.img)"
					mode="aspectFill"
					class="list_img bor_radius_top10"></image>
				<view class="mask2" v-if="!item.stock">
					<image :src="imgUrl + 'sold.png'" class="sold2"></image>
				</view>
				<view class="cont rows d-flex f-column padding10 j-sb">
					<view class="black size30 ellipsis_2 bold300">{{ item.name }}</view>
					<view class="row a-center">
						<view class="flex-1">
							<text class="price size26">￥</text>
							<text class="price size34 bold500">{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit"
								>/{{ item.unit }}</text
							>
							<!-- <text class="size26 line-through color_C0 m-left10">￥{{parseFloat(item.full_price)}}</text> -->
							<view
								class="h6 color_77 bold300 m-left10 d-inline-block"
								v-if="item.sales_number && !pageData.hideSales"
								>已售{{ item.sales_number }}</view
							>
						</view>
						<view
							class="iconfont size42 bold500"
							:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{ color: pageData.btnColor || '#E90B08' }"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 一行一个 -->
		<view class="content" v-if="pageData.listStyle == 1">
			<view
				class="list1 row bgwhite bor_radius_10 m-bot20"
				:class="{ shadow: pageData.shadow == 1 }"
				v-for="(item, index) in infoData"
				:key="index"
				@click="toGoods(item.goods_id)">
				<image
					:src="$imgUrls(item.img)"
					mode="aspectFill"
					class="list_imgs bor_radius_left10"></image>
				<view class="mask1" v-if="!item.stock"></view>
				<image :src="imgUrl + 'sold.png'" class="sold1" v-if="!item.stock"></image>
				<view class="flex-1 m-left20 p-right20 d-flex j-sb f-column">
					<view class="rows m-top20">
						<text class="black size32 ellipsis_2 bold300">{{ item.name }}</text>
						<text class="color_77 size28 m-top20 ellipsis bold300">{{
							item.info
						}}</text>
					</view>
					<view class="row j-sb a-center m-bot20">
						<view>
							<text class="price size26">￥</text>
							<text class="price size34 bold500">{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit"
								>/{{ item.unit }}</text
							>
							<text class="size26 line-through color_C0 bold300 m-left10"
								>￥{{ parseFloat(item.full_price) }}</text
							>
							<view
								class="h6 color_77 bold300 m-top10"
								v-if="item.sales_number && !pageData.hideSales"
								>已售{{ item.sales_number }}</view
							>
						</view>
						<view
							class="iconfont size42 bold500"
							:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{ color: pageData.btnColor || '#E90B08' }"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 一行三个 -->
		<view class="content" v-if="pageData.listStyle == 3">
			<view
				class="padding30-20 bgwhite bor_radius_20"
				:class="{ shadow: pageData.shadow == 1 }">
				<view class="d-flex a-center">
					<view class="flex-1 size32 bold">{{ pageData.title }}</view>
					<view class="m-left20 color_99" @click="toCates">
						<text>更多</text>
						<text class="iconfont icon-xiangyouxiayiye h6"></text>
					</view>
				</view>
				<view class="d-flex f-wrap">
					<view
						class="list3 m-top30"
						v-for="(item, index) in infoData"
						:key="index"
						@click="toGoods(item.goods_id)">
						<image
							:src="$imgUrls(item.img)"
							mode="aspectFill"
							class="bor_radius_10 m-bot10"></image>
						<view class="size28 bold300 ellipsis m-bot10">{{ item.name }}</view>
						<view class="m-bot10">
							<text class="price size30 bold500">￥{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit"
								>/{{ item.unit }}</text
							>
						</view>
						<view class="h6 color_77 bold300 m-bot10" v-if="!pageData.hideSales"
							>已售{{ item.sales_number }}</view
						>
					</view>
				</view>
			</view>
		</view>
		<!-- 大图模式 -->
		<view
			class="content"
			v-if="pageData.listStyle == 4"
			:style="{
				'--height-4': pageData.picScale ? 690 * pageData.picScale + 'rpx' : '460rpx',
			}">
			<view
				class="list_4 p-re bgwhite bor_radius_10 m-bot20"
				:class="{ shadow: pageData.shadow == 1 }"
				v-for="(item, index) in infoData"
				:key="index"
				@click="toGoods(item.goods_id)">
				<image
					:src="$imgUrls(item.img)"
					mode="aspectFill"
					class="bor_radius_top10 mask4Img"></image>
				<view class="mask4 bor_radius_10" v-if="!item.stock">
					<image :src="imgUrl + 'sold.png'" class="sold4"></image>
				</view>
				<view class="padding20">
					<view class="black size36 ellipsis bold500">{{ item.name }}</view>
					<view class="color_33 size30 ellipsis m-top12 bold300">{{ item.info }}</view>
					<view class="row j-sb a-center m-top30">
						<view>
							<text class="price size30">￥</text>
							<text class="price size38 bold500">{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit"
								>/{{ item.unit }}</text
							>
							<text class="size30 line-through color_C0 bold300 m-left10"
								>￥{{ parseFloat(item.full_price) }}</text
							>
							<text
								class="h6 color_77 bold300 m-left30"
								v-if="item.sales_number && !pageData.hideSales"
								>已售{{ item.sales_number }}</text
							>
						</view>
						<view
							class="iconfont size46 bold500"
							:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{ color: pageData.btnColor || '#E90B08' }"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 榜单 -->
		<view class="content" v-if="pageData.listStyle == 5">
			<view
				class="rank bor_radius_20 p-top30 p-left20"
				:style="{
					backgroundImage: pageData.img
						? 'url(' + pageData.img + ')'
						: 'url(' + imgUrl + 'goods_rank_bg.png' + ')',
				}">
				<view
					class="size36 bold t-letter4 m-bot40 ellipsis"
					v-if="pageData.title"
					:style="{ color: pageData.titColor || 'white' }"
					>{{ pageData.title }}</view
				>
				<view style="height: 88rpx" v-else></view>
				<swiper class="swiper" next-margin="160rpx">
					<swiper-item v-for="(group, index) in groups" :key="index">
						<view class="swiper-item bor_radius_20">
							<view
								class="m-bot24 d-flex p-re"
								v-for="item in group"
								:key="item.goods_id"
								@click="toGoods(item.goods_id)">
								<image
									:src="$imgUrls(item.img)"
									mode="aspectFill"
									class="pic"></image>
								<view class="mask5" v-if="!item.stock"></view>
								<image
									:src="imgUrl + 'sold.png'"
									class="sold5"
									v-if="!item.stock"></image>
								<view class="flex-1 p-left20 p-top12">
									<view class="size28 color_22 bold300 ellipsis m-bot20">{{
										item.name
									}}</view>
									<view>
										<text class="price size30 bold500"
											>￥{{ parseFloat(item.price) }}</text
										>
										<text
											class="h6 color_77 bold300"
											v-if="item.unit && !pageData.hideUnit"
											>/{{ item.unit }}</text
										>
									</view>
									<view
										class="btn size36 p-ab iconfont"
										:class="
											pageData.btnName ? pageData.btnName : 'icon-gouwuche2'
										"
										:style="{ color: pageData.btnColor || '#E90B08' }"></view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 卡片轮播 -->
		<view class="content" v-if="pageData.listStyle == 6">
			<swiper
				class="cardSwiper"
				:current="current"
				previous-margin="120rpx"
				next-margin="120rpx"
				circular
				@change="swiperChange">
				<swiper-item v-for="(item, index) in infoData" :key="index">
					<view
						class="item wh padding30 bgwhite bor_radius_10 text-center"
						@click="toGoods(item.goods_id)"
						:class="{ active: current == index, shadow: pageData.shadow == 1 }">
						<image :src="$imgUrls(item.img)" mode="aspectFill" class="pic"></image>
						<view class="size30 bold300 ellipsis m-top10">{{ item.name }}</view>
						<view class="m-top10 m-bot10">
							<text class="price size30 bold500">￥{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit"
								>/{{ item.unit }}</text
							>
							<text
								class="h6 color_77 bold300 m-left10"
								v-if="item.sales_number && !pageData.hideSales"
								>已售{{ item.sales_number }}</text
							>
						</view>
						<view
							class="btn white d-inline-block"
							:style="{ background: pageData.btnColor || '#E90B08' }">
							<text
								class="iconfont h6 m-right8"
								:class="
									pageData.btnName ? pageData.btnName : 'icon-gouwuche2'
								"></text>
							<text>{{ item.price_name || '立即购买' }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="flexac m-top30">
				<view
					class="indicator bor_radius_10"
					:class="{ active: current == index }"
					@click="current = index"
					v-for="(item, index) in infoData"
					:key="index">
					<image :src="$imgUrls(item.img)" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: 'product',
		props: ['pageData'],
		data() {
			return {
				infoData: [],
				groups: [],
				imgUrl: this.imgUrl + 'Uploads/diy/img/',
				current: 0,
			};
		},
		computed: {
			...mapState(['color']),
		},
		mounted() {
			this.getBlockInfo();
		},
		methods: {
			async getBlockInfo() {
				const result = await this.$getBlockInfo(this.pageData.list);
				if (!result.list.length) return;
				this.infoData = result.list || [];
				if (this.pageData.listStyle == 5) {
					this.groups = [];
					let size = 4;
					for (let i = 0; i < this.infoData.length; i += size) {
						let group = this.infoData.slice(i, i + size);
						this.groups.push(group);
					}
				}
			},
			swiperChange(e) {
				this.current = e.detail.current;
			},
			toGoods(id) {
				let path = '/pages/goods/goods_detail?isHome=1&goodsid=' + id;
				if (this.pageData.mode == 1) path = path + '&mode=1';
				if (this.pageData.mode == 2) path = path + '&mode=1&scan=1';
				this.toUrl(path);
			},
			toCates() {
				if (!this.pageData.mode) this.$rectTo('/pages/classify/classify');
				if (this.pageData.mode == 1) this.$rectTo('/pages/classify/repast');
				if (this.pageData.mode == 2) this.toUrl('/otherPage/custom/placeOrder');
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 30rpx;
		background-color: var(--bgcolor);
	}
	// 一行两个
	.list {
		width: 332rpx;
		// height: 500rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		.cont {
			min-height: 168rpx;
		}
		.sold2 {
			width: 148rpx;
			height: 148rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -74rpx 0 0 -74rpx;
		}
	}
	.list_img,
	.mask2 {
		width: 332rpx;
		height: 332rpx;
	}
	// 一行一个
	.list1 {
		position: relative;
		.sold1 {
			width: 148rpx;
			height: 148rpx;
			position: absolute;
			top: 50%;
			margin-top: -74rpx;
			left: 72rpx;
		}
	}
	.list_imgs,
	.mask1 {
		width: 292rpx;
		height: 292rpx;
	}
	// 一行三个
	.list3 {
		width: 200rpx;
		image {
			width: 200rpx;
			height: 200rpx;
		}
		&:not(:nth-child(3n)) {
			margin-right: 25rpx;
		}
	}
	// 大图模式
	.list_4 {
		width: 690rpx;
		image,
		.mask4,
		.mask4Img {
			width: 690rpx;
			height: 460rpx;
		}
		.sold4 {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -100rpx 0 0 -100rpx;
		}
	}
	.mask1,
	.mask2,
	.mask4,
	.mask5 {
		background: rgba(0, 0, 0, 0.4);
		position: absolute;
		top: 0;
		left: 0;
	}
	.shadow {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
	}
	// 榜单
	.rank {
		height: 800rpx;
		background-repeat: no-repeat;
		background-size: cover;
		.swiper {
			height: 650rpx;
			.swiper-item {
				width: 480rpx;
				height: 650rpx;
				background: rgba(255, 255, 255, 0.76);
				padding: 24rpx 28rpx 0 24rpx;
				.pic,
				.mask5 {
					width: 130rpx;
					height: 130rpx;
				}
				.sold5 {
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					top: 50%;
					margin-top: -40rpx;
					left: 25rpx;
				}
				.btn {
					right: 0;
					top: 80rpx;
					z-index: 10;
				}
			}
		}
	}
	// 卡片轮播
	.cardSwiper {
		height: 600rpx;
		.item {
			transform: scale(0.8);
			transition: transform 0.3s ease-in-out 0s;
			&.active {
				transform: scale(0.99);
			}
			.pic {
				height: 390rpx;
			}
			.btn {
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 16rpx;
				border-radius: 22rpx;
			}
		}
	}
	.indicator {
		width: 80rpx;
		height: 80rpx;
		margin: 0 8rpx;
		box-sizing: content-box;
		&.active {
			border: 2rpx solid var(--color);
		}
	}
	.price {
		color: var(--price-color);
	}
</style>
